<template>
	<view class="empire-search">
		<view class="search-wrap" :style="transClass">
			<view class="search-bar">
				<uni-search-bar
					class="search-bar__input"
					v-model="searchText"
					placeholder="请输入商品名称"
					bg-color="#fff"
					text-color="#6a6a6a"
					radius="37"
					cancel-button="none"
				/>
				<text class="search-btn" @click="handleSearchText">搜索</text>
			</view>
			<EmpireKeywords
				v-if="showKeywords"
				:keywords="keywords"
				@open="handleOpenPanel"
				@change="handleSearchTextChange"
			></EmpireKeywords>
			<EmpirePopup
				v-else
				:visible.sync="!showKeywords"
				:keywords="keywords"
				@close="handleClosePanel"
				@change="handleSearchTextChange"
			></EmpirePopup>
		</view>
		<uni-transition v-if="!showKeywords" mode-class="fade" :style="maskStyle" />
	</view>
</template>

<script setup>
import EmpireKeywords from '@/components/empire-keywords.vue';
import EmpirePopup from '@/components/empire-popup.vue';
import { ref, shallowReactive, onMounted, getCurrentInstance } from 'vue';
import { getSearchKeywords } from '@/store/keywords.js';

const keywords = ref([]);
const searchText = ref();
const showKeywords = ref(true);
const maskStyle = shallowReactive({
	position: 'fixed',
	'z-index': 99,
	top: 0,
	bottom: 0,
	left: 0,
	right: 0,
	backgroundColor: 'rgba(0, 0, 0, 0.4)'
});
const transClass = shallowReactive({});
onMounted(() => {
	initSearchKeywords();
});
function handleSearchText() {}

function handleOpenPanel(value) {
	showKeywords.value = !value;
}

function handleClosePanel(value) {
	showKeywords.value = !value;
}
function handleSearchTextChange(text) {
	searchText.value = text;
}

function initSearchKeywords() {
	getSearchKeywords((res) => {
		const { data } = res || {};
		if (data) {
			keywords.value = data;
		}
	});
}
</script>

<style lang="scss" scoped>
.empire-search {
	width: 100%;
	height: 100%;
}
.search-wrap {
	position: fixed;
	left: 0;
	right: 0;
	background-color: #f5f5f5;
	z-index: 999;
}
.search-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 20rpx);
	padding: 0 20rpx 0 0;
}
.search-bar__input {
	flex: 2;
}
.search-btn {
	font-size: 30rpx;
}
</style>
